// src/views/excel/Export.tsx
import { Input, Select, Space, Button, Table, Image, Switch } from 'antd'
import { useEffect } from 'react'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { useState } from 'react'
import { getCategoryList, getProList, getSearchProList } from '../../api/pro'

import ExportJsonExcel from 'js-export-excel'

type ExportProps = {}
// 产品接口约束
interface DataType {
    proid: string;
    proname: string;
    img1: string;
    originprice: number;
    discount: number;
    sales: number;
    stock: number;
    category: string;
    brand: string;
    issale: number;
    isrecommend: number;
    isseckill: number;
}

export const Export = (props: ExportProps) => {
    const [proList, setProList] = useState<DataType[]>([]) // 表格数
    const [categoryList, setCategoryList] = useState<string[]>([]) // 分类数据
    const [category, setCategory] = useState<string>('') //分类搜索条件
    const [search, setSearch] = useState<string>('') // 关键词搜索

    const [current, setCurrent] = useState<number>(1) // 页码
    const [pageSize, setPageSize] = useState<number>(5) // 每页显示个数

    const getProListData = async () => { // 请求表格数据
        const res = await getProList()
        setProList(res.data.data)
    }

    const getCategoryListData = async () => { // 请求分类的数据
        const res = await getCategoryList()
        setCategoryList(res.data.data)
    }

    useEffect(() => {
        getProListData()
        getCategoryListData()
    }, [])


    return (
        <Space direction='vertical' style={{ width: '100%' }}>
            <Space>
                <Select value={category} style={{ width: 120 }} onChange={value => {
                    console.log(value)
                    setCategory(value)
                }}>
                    <Select.Option key='all' value="">全部</Select.Option>
                    {
                        categoryList && categoryList.map(item => {
                            return (
                                <Select.Option key={item} value={item}>{item}</Select.Option>
                            )
                        })
                    }
                </Select>
                <Input placeholder='请输入关键词' value={search} onChange={e => setSearch(e.target.value)} />
                <Button type='primary' onClick={async () => {
                    const res = await getSearchProList({
                        category,
                        search
                    })
                    setProList(res.data.data)
                }}>搜索</Button>
                <Button type='primary' onClick={() => {
                    const arr = JSON.parse(JSON.stringify(proList))
                    arr.sort((a: DataType, b: DataType) => a.originprice - b.originprice)
                    setProList(arr)
                }}>价格升序</Button>



                {/* 增加导出数据的功能 */}
                <Button type='primary' onClick={() => {
                    let option: {
                        fileName: string
                        datas: {
                            sheetData: DataType[],
                            sheetName: string,
                            sheetFilter: string[],
                            sheetHeader: string[],
                            columnWidths: number[]
                        }[]
                    };
                    option = {
                        fileName: "产品列表", // 导出的文件的名称
                        datas: [
                            {
                                sheetData: proList, // 表格数据
                                sheetName: "产品列表-基础", // excel表格中表格的名字
                                sheetFilter: ["proname", "img1", "category"], // 需要导出的数据的字段
                                sheetHeader: ["产品名称", "图片", "分类"], // 表头的值
                                columnWidths: [20, 20],
                            },
                            {
                                sheetData: proList, // 表格数据
                                sheetName: "产品列表-完整", // excel表格中表格的名字
                                sheetFilter: ["proname", "img1", "category", 'originprice'], // 需要导出的数据的字段
                                sheetHeader: ["产品名称", "图片", "分类", '价格'], // 表头的值
                                columnWidths: [20, 20],
                            },
                        ]
                    }

                    var toExcel = new ExportJsonExcel(option); //new
                    toExcel.saveExcel(); //保存
                }}>导出数据</Button>



            </Space>
            <Table
                dataSource={proList}
                rowKey="proid"
                bordered
                scroll={{ y: document.body.offsetHeight - 330 }}
                pagination={{
                    current,
                    pageSize,
                    showTotal: (total) => {
                        return <span> 共有 {total} 条数据</span>
                    },
                    onChange(page, pageSize) {
                        setCurrent(page)
                        setPageSize(pageSize)
                    }
                }}
            >
                <Table.Column
                    title="序号"
                    render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
                ></Table.Column>
                <Table.Column
                    title="分类"
                    dataIndex="category"
                ></Table.Column>
                <Table.Column
                    title="品牌"
                    dataIndex="brand"
                ></Table.Column>
                <Table.Column
                    title="名称"
                    dataIndex="proname"
                    render={(text) => { return text.length > 10 ? text.substring(0, 10) + "..." : text }}
                ></Table.Column>
                <Table.Column
                    title="图片"
                    dataIndex="img1"
                    render={(text) => { return <Image src={text} width={80} height={80} /> }}
                ></Table.Column>
                <Table.Column
                    title="价格"
                    dataIndex="originprice"
                    sorter={(a: DataType, b: DataType) => a.originprice - b.originprice}
                ></Table.Column>
                <Table.Column
                    title="折扣"
                    dataIndex="discount"
                    sorter={(a: DataType, b: DataType) => a.discount - b.discount}
                ></Table.Column>
                <Table.Column
                    title="销量"
                    dataIndex="sales"
                    sorter={(a: DataType, b: DataType) => a.sales - b.sales}
                ></Table.Column>
                <Table.Column
                    title="库存"
                    dataIndex="stock"
                    sorter={(a: DataType, b: DataType) => a.stock - b.stock}
                ></Table.Column>
                <Table.Column
                    title="是否上架"
                    dataIndex="issale"
                    render={(text) => { return <Switch checked={text === 1} /> }}
                ></Table.Column>
                <Table.Column
                    title="是否推荐"
                    dataIndex="isrecommend"
                    render={(text) => { return <Switch checked={text === 1} /> }}
                ></Table.Column>
                <Table.Column
                    title="是否秒杀"
                    dataIndex="isseckill"
                    render={(text) => { return <Switch checked={text === 1} /> }}
                ></Table.Column>
                <Table.Column
                    title="操作"
                    render={(text, record: DataType, index) => {
                        return (
                            <Space>
                                <Button type="primary" shape="circle" icon={<EditOutlined />} />
                                <Button danger shape="circle" icon={<DeleteOutlined />} />
                            </Space>
                        )
                    }}
                ></Table.Column>
            </Table>
        </Space>
    );
}